<template>
	<view v-if="isShowGuideMask" style="width: 100vw; height: 100vh; background-color: rbga(0,0,0,0); position: absolute; z-index: 999;">
		<view style="width: 100%; height: 100%; background-color: rbga(0,0,0,0); position: relative;">
			<uni-popup ref="popup" background-color="#fff" :is-mask-click="false">
				<view v-for="(item, index) in guideData">
					<view v-if="index == guideIndex && item.showGuideBox" class="guide-box" :style="[setGuideBoxStyle(item)]">
						<slot :name="item.slotName"></slot>
					</view>
					<view v-if="index == guideIndex" class="guide-text" :style="[setGuideTextStyle(item)]">
						<view style="font-size: 17px;">{{item.text}}</view>
						<view style="margin-top: 5px; display: flex; justify-content: flex-end;">
							<view class="next-text" @click="next(item, index)">{{item.nextText}}</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Guide',
		props: {
			guideData: {
				type: Array,
				default: []
			},
			guideBoxStyle: {
				type: Object,
				default:  {
					'width': '100px',
					'height': '50px',
				}
			},
			guideTextStyle: {
				type: Object,
				default:  {
					'width': '200px',
					'height': '100',
					'background-color': '#f7f0f0',
				}
			}
		},
		data() {
			return {
				guideIndex: 0,
				isShowGuideMask: false
			}
		},
		methods: {
			// 设置指引框样式
			setGuideBoxStyle(item) {
				return Object.assign({}, this.guideBoxStyle, {
					width:item.boxWidth,
					height: item.boxHeight,
					top: item.boxTop,
					left: item.boxLeft,
				})
			},
			
			// 设置指引文字样式
			setGuideTextStyle(item) {
				return Object.assign({}, this.guideTextStyle, {
					top: item.textTop,
					left: item.textLeft,
				})
			},
			
			// 指引继续事件
			next(item, index) {
				this.$emit('nextClick', {item: item, index: index})
				if(this.guideIndex + 1 == this.guideData.length) {
					this.close()
				} else {
					if(this.guideIndex + 1 < this.guideData.length) {
						this.guideIndex++
						this.$emit('nextChange', {item: item, index: index})
					}
				}
			},
			
			open() {
				this.isShowGuideMask = true
				setTimeout(() => {
					this.$refs.popup.open()
				},100)
			},
			close() {
				this.isShowGuideMask = false
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="less" scoped>
	.guide-box {
		position: absolute;
		border: 1px #ff0000 solid;
		border-radius: 5px;
	}
	.guide-text {
		position: absolute;
		border: 1px #14a5ff solid;
		border-radius: 5px;
		padding: 5px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		.next-text {
			padding: 2px;
			border: 1px #b5b5b5 solid;
			border-radius: 5px;
			background-color: #3da5ff;
			color: #ffffff;
		}
	}
</style>